<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>住客列表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/views/static/common/layui/css/layui.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/views/static/admin/css/style.css">
    <script src="${pageContext.request.contextPath}/views/static/common/layui/layui.js"></script>
    <script src="${pageContext.request.contextPath}/views/static/common/jquery-3.3.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/views/static/common/vue.min.js"></script>
    <style>
        .pageIndex {
            width: 600px;
            text-align: center;
            margin: 30px auto;
        }

        .pageIndex a {
            width: 30px;
            height: 30px;
            display: inline-block;
            text-align: center;
            line-height: 30px;
            background-color: rgba(47,47,47,0.3) !important;
            color: #E5DFD5;
            text-decoration: none;
        }

        .active {
            background-color: rgba(111,140,245,0.5);
        }
        body{
            color: #E5DFD5;!important;
        }
        table{

            width: 100%;
            margin-top: 30px
        }
        thead{
            height: 40px;
        }
        thead tr{
            background-color: rgba(47,47,47,0.4) !important;

        }
        tbody{
            background-color: rgba(47,47,47,0.1); !important;
            text-align: center;
        }
        td,th{
            border: solid 1px rgba(255,255,255,0.2) !important;
        }

        input[type="text"]{
            margin-left: 80px;
            width: 900px;
            margin-right: 10px;
        }
        button[type="submit"]{
            background-color: rgba(47,47,47,0.4);
            color: #E5DFD5;
            border: 0px;
            height: 35px;
            width: 60px;
        }
        .right{
            margin: 0 !important;
        }
        .search{
            float: right;
        }
        input[type="text"]{
            margin-left: 80px;
            width: 900px;
            margin-right: 10px;
            height: 35px;
            border-radius: 10px;
            border: 0px;
            font-size: 18px;
            color: rgba(47,47,47,0.8);
        }
        input[type="submit"]{
            background-color: rgba(47,47,47,0.4);
            color: #E5DFD5;
            border: 0px;
            height: 40px;
            width: 60px;
            border-radius: 6px;
        }
        form{
            padding-top: 10px;
            text-align: center;
        }
        .search{
            width: 100%;
            text-align: center;
            margin-bottom: 15px;
        }
        .url{
            margin-top: 30px;
            text-align: right;
            font-size: 16px;
            margin-right: 20px;
        }
        .url a{
            background-color: rgba(47,47,47,0.4);
            text-align: center;
            border: #E5DFD5 1px solid;
            border-radius: 5px;
            color: #E5DFD5;
            margin-right: 5px;
            margin-left: 5px;
            padding: 8px;
        }
        .url a:hover{
            border: white 1px solid;
            color: white;
        }
        .right{
            padding-top: 0px;
        }
        td a{
            color: blueviolet;
        }
        tr{
            height:40px;
        }
    </style>
</head>
<body>
<%----%>
<div id="app">
    <div class="url">

        <a href="${pageContext.request.contextPath}/roomListByState?flag=0">查看所有空房 </a>
        <a href="${pageContext.request.contextPath}/roomListByState?flag=1">查看所有入住房 </a>
        <a href="${pageContext.request.contextPath}/roomListAll">返回所有房间</a>
    </div>
        <!--右侧-->
        <div class="right">
            <div class="layui-row" >
                <fieldset class="layui-elem-field layui-field-title" style="margin-bottom: 0px">
                    <legend>房间列表</legend>
                </fieldset>
                <%--                搜索--%>
                <%--                <form method="post"   action="${pageContext.request.contextPath}/guests/find" >--%>
                <%--                <div  class="layui-col-lg4" style="float: right">--%>
                <%--                    <div>--%>
                <%--                        <span style="color: red; font-weight: bold" > &nbsp;${error}</span>--%>
                <%--                    </div>--%>
                <%--                    <div class="layui-input-inline" style="width:320px ;float: left" >--%>
                <%--                        <input type="text" name="findByPhone" placeholder="输入手机号进行查询" class="layui-input key" >--%>
                <%--                    </div>--%>
                <%--                    <div style="float: right">--%>
                <%--                        <button type="submit" class="layui-btn layui-btn-normal" style="width: 100px">查询</button>--%>
                <%--                    </div>--%>
                <%--                </div>--%>
                <%--                </form>--%>

            </div>
            <%--            表格 --%>

            <div style="width: 100%;color: red;text-align: center" id="msg">${msg}</div>
            <div class="search">
                <form action="${pageContext.request.contextPath}/roomFindByNumber" method="post">
                    <input type="text" name="number"><input type="submit" value="搜索">
                </form>
            </div>


            <table>

                <thead>
                <tr>
                    <th>编号</th>
                    <th>房间号</th>
                    <th>房间类型</th>
                    <th>价格</th>
                    <th>房间状态</th>
                    <th>操作</th>
                </tr>
                </thead>

                <tbody>
                <c:forEach items="${page.list}" var="room" varStatus="status">
                    <tr class="id36567">
                        <td>${status.index+1}</td>
                        <td>${room.roomNumber}</td>
                        <td>${room.roomCategoryName}</td>
                        <td>${room.roomPrice}</td>
                        <td>
                            <c:if test="${room.roomState=='1'}">
                                <div style="color: red">已入住</div>
                            </c:if>
                            <c:if test="${room.roomState=='0'}">
                                <div style="color: green">空房</div>
                            </c:if>
                        </td>
                        <td>
                            <a href="${pageContext.request.contextPath}/roomFind?id=${room.roomId}">修改</a>
                            /<a href="javascript: if(window.confirm('是否删除？'))
                {window.location.href='${pageContext.request.contextPath}/roomDelete?id=${room.roomId}'}"  >删除</a></td>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
        <div class="pageIndex">
            <c:forEach items="${page.pageIndex}" var="item">
                <c:if test="${item ne '...'}">
                    <c:if test="${(page.currentIndex eq item) && !(empty item) }">
                        <a class="active" href="${pageContext.request.contextPath}/roomListAll?id=${item}">${item}</a>
                    </c:if>
                    <c:if test="${page.currentIndex ne item && !(empty item)}">
                        <a href="${pageContext.request.contextPath}/roomListAll?id=${item}">${item}</a>
                    </c:if>
                </c:if>
                <c:if test="${item eq '...'}">
                    <a href="">${item}</a>
                </c:if>
            </c:forEach>
        </div>
        <div style="width: 600px;text-align: center;margin: 0 auto">当前第${page.currentIndex}页，共${page.totalPage}页</div>
    </div>
</div>
<script src="${pageContext.request.contextPath}/views/static/admin/js/config.js"></script>
<script src="${pageContext.request.contextPath}/views/static/admin/js/script.js"></script>
</body>
</html>

